<template>
  <div id="main">
    <div id="form">
      <el-form ref="pay" :model="pay" label-width="100px" class="demo-ruleForm" :rules="rules">
        <el-form-item prop="parentId" label="家长姓名" :label-width="formLabelWidth">
          <!-- <el-input v-model="pay.parentId" maxlength="20" autocomplete="off" /> -->
          <el-select v-model="pay.parentId" placeholder="请选择" filterable style="width: 700px;">
            <el-option
              v-for="j in parent"
              :key="j.parentId"
              :value="j.parentId"
              :label="j.String"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="studentId" label="学生" :label-width="formLabelWidth">
          <!-- <el-input v-model="pay.studentId" maxlength="20" autocomplete="off" style="width: 650px;" /> -->
          <el-select v-model="pay.studentId" placeholder="请选择" filterable style="width: 650px;">
            <el-option
              v-for="j in child"
              :key="j.studentId"
              :value="j.studentId"
              :label="j.String"
            />
          </el-select>
          <el-button style="margin-left: 10px;" size="small" type="primary" icon="el-icon-plus" circle @click="handleOpen" />
        </el-form-item>
        <el-form-item prop="lessonId" label="课程" :label-width="formLabelWidth">
          <!-- <el-input v-model="pay.lessonId" autocomplete="off" maxlength="20" /> -->
          <el-select v-model="pay.lessonId" placeholder="请选择" filterable style="width: 700px;" @change="getUnitPrice">
            <el-option
              v-for="j in lesson"
              :key="j.lessonId"
              :value="j.lessonId"
              :label="j.lessonName"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="unitPrice" label="单价" :label-width="formLabelWidth">
          <el-input v-model="pay.unitPrice" autocomplete="off" maxlength="32" />
        </el-form-item>
        <el-form-item prop="classHours" label="课程数量" :label-width="formLabelWidth">
          <el-input v-model="pay.classHours" maxlength="11" autocomplete="off" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" @blur="countSubtotal()" />
        </el-form-item>
        <el-form-item prop="remindTimes" label="剩余次数提醒" :label-width="formLabelWidth">
          <el-input v-model="pay.remindTimes" autocomplete="off" />
        </el-form-item>

        <el-form-item prop="paySubtotal" label="小计" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="pay.paySubtotal" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="payType" label="缴费类别" :label-width="formLabelWidth">
          <!-- <el-input v-model="parent.parentSex" autocomplete="off" /> -->
          <el-select v-model="pay.payType" placeholder="请选择">
            <el-option key="1" label="线下支付" value="1" />
            <el-option key="2" label="微信支付" value="2" />
            <el-option key="3" label="支付宝支付" value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <div id="buttons">
        <el-button type="primary" @click="submitpay('pay')">添加</el-button>
      </div>
    </div>

    <el-dialog title="添加孩子" :close-on-click-modal="false" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form ref="student" :model="student" label-position="top">

        <el-form-item prop="studentName" label="孩子姓名" :label-width="formLabelWidth">
          <el-input v-model="student.studentName" autocomplete="off" maxlength="20" />
        </el-form-item>

        <el-form-item prop="studentAddress" label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="student.studentAddress" autocomplete="off" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleAddStudent('student')">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addPay } from '@/api/pay'
import { selectStudent, addChild2 } from '@/api/child'
import { getParentString } from '@/api/parent'
import { getAllLesson, getLessonById } from '@/api/lesson'
export default {
  data() {
    return {
      pay: {
        paySubtotal: '',
        unitPrice: ''
      },
      student: {},
      parent: [],
      child: [],
      lesson: [],
      oneLesson: {},
      type: '',
      formLabelWidth: '100px',
      dialogFormVisible: false,
      rules:{
      parentId: [{ required: true, message: "家长姓名不能为空", trigger: "blur" }],
      studentId: [{ required: true, message: "学生不能为空", trigger: "blur" }],
      lessonId: [{ required: true, message: "课程不能为空", trigger: "blur" }],
      unitPrice: [{ required: true, message: "单价不能为空", trigger: "blur" }],
      classHours: [{ required: true, message: "课程数量不能为空", trigger: "blur" }],
      payType: [{ required: true, message: "缴费类别不能为空", trigger: "blur" }],
    }
    }
    
  },
  created() {
    this.fetchData()
    this.getAllChild()
    this.getParentString()
    this.getAllLesson()
  },
  methods: {
    fetchData() {
    },
    getAllChild() {
      selectStudent().then((res) => {
        this.child = res.obj
      })
    },
    getParentString() {
      getParentString().then((res) => {
        this.parent = res.obj
      })
    },
    getAllLesson() {
      getAllLesson().then((res) => {
        this.lesson = res.obj
      })
    },
    submitpay(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addPay(this.pay).then((resp) => {
            this.$notify({
              title: '添加成功',
              type: 'success'
            })
                this.pay=''
          })
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    handleOpen() {
      this.student = {}
      this.dialogFormVisible = true
    },
    handleClose() {
      this.dialogFormVisible = false
      this.student = {}
    },
    handleAddStudent(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addChild2(this.student).then((resp) => {
            this.child.push(resp.obj)
            this.$notify({
              title: '添加成功',
              type: 'success'
            })
          })
          // this.getAllChild()
          this.dialogFormVisible = false
          return true
      
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    countSubtotal() {
      this.pay.paySubtotal = this.pay.unitPrice * this.pay.classHours
    },
    getUnitPrice(value) {
      console.log(value)
      getLessonById(value).then((resp) => {
        this.oneLesson = resp.obj
        this.pay.unitPrice = this.oneLesson.lessonPrice
      })
    },
    isCellPhone(val) {
      if (!/^1[3456789]\d{9}$/.test(val)) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
  #main{
    width: 100%;
  }

  #form{
    border: #E4E7ED 1px solid;
    border-radius: 30px;
    padding: 50px;
    margin: 50px auto;

    width: 900px;

  }
  #buttons{
    text-align: center;
  }
  input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
  }
  input[type="number"]{
    -webkit-appearance:textfield;
    -moz-appearance:textfield;
    -o-appearance:textfield;
    -ms-appearance:textfield;
    appearance:textfield;
  }
</style>
